<template>
  <div class="store-home">
    <SearchBar></SearchBar>
    <FlapCard :data="randomBook"></FlapCard>
    <Scroll :top="scrollTop" @onScroll="onScroll" ref="scroll">
      <div class="banner-wrapper">
        <div
          class="banner-img"
          :style="{ backgroundImage: `url('${banner}')` }"
        ></div>
      </div>

      <GuessYouLike :data="guessYouLike"></GuessYouLike>
      <Recommend :data="recommend" class="recommend"></Recommend>
      <Featured
        :data="featured"
        :titleText="$t('home.featured')"
        :btnText="$t('home.seeAll')"
        class="featured"
      ></Featured>
      <div
        class="category-list-wrapper"
        v-for="(item, index) in categoryList"
        :key="index"
      >
        <CategoryBook :data="item"></CategoryBook>
      </div>

      <Category class="category" :data="categories"></Category>
    </Scroll>
  </div>
</template>

<script>
import SearchBar from '@/components/home/SearchBar.vue';
import Scroll from '@/components/common/Scroll.vue';
import FlapCard from '@/components/home/FlapCard.vue';
import { storeHomeMixin } from '@/utils/mixin';

import { home } from '@/api/store';
import GuessYouLike from '@/components/home/GuessYouLike.vue';
import Recommend from '@/components/home/Recommend.vue';
import Featured from '@/components/home/Featured.vue';
import CategoryBook from '@/components/home/CategoryBook.vue';
import Category from '@/components/home/Category.vue';

export default {
  mixins: [storeHomeMixin],
  components: {
    SearchBar,
    Scroll,
    FlapCard,
    GuessYouLike,
    Recommend,
    Featured,
    CategoryBook,
    Category,
  },
  data() {
    return {
      scrollTop: 94,
      randomBook: null,
      banner: '',
      guessYouLike: null,
      recommend: null,
      featured: null,
      categoryList: null,
      categories: null,
    };
  },
  methods: {
    onScroll(offsetY) {
      this.setOffsetY(offsetY);
      if (offsetY > 0) {
        this.scrollTop = 52;
      } else {
        this.scrollTop = 94;
      }
      // 重新计算滚动条
      this.$refs.scroll.refresh();
    },
  },
  mounted() {
    home().then((response) => {
      // 从24本书中随机抽取一本
      if (response && response.status === 200) {
        const data = response.data;

        // 为组件赋值
        this.banner = data.banner;
        this.guessYouLike = data.guessYouLike;
        this.recommend = data.recommend;
        this.featured = data.featured;
        this.categoryList = data.categoryList;
        this.categories = data.categories;

        const randomIndex = Math.floor(Math.random() * data.random.length);
        this.randomBook = data.random[randomIndex];
      }
    });
  },
};
</script>

<style scoped lang="scss">
@import '../../assets/styles/global';
.store-home {
  width: 100%;
  height: 100%;
  background: #fff;
  .banner-wrapper {
    width: 100%;
    padding: px2rem(10);
    box-sizing: border-box;
    .banner-img {
      width: 100%;
      height: px2rem(150);
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
  }
  .recommend {
    margin-top: px2rem(20);
  }
  .featured {
    margin-top: px2rem(20);
  }
  .category-list-wrapper {
    margin-top: px2rem(20);
  }
  .category {
    margin-top: px2rem(20);
  }
}
</style>
